<template>
  <ElementDialog ref="dialog" embed :visible="visible" height="500px" show-full-screen :title="title ? title : '请选择项目'">
    <FlexRow style="height: 100%">
      <div style="width: 140px; border-right: 1px solid #eee; margin-right: 6px; padding-right: 6px" class="flex-not-shrink">
        <EditableTree :fetch-api="getYears" readonly :custom-root-node="{ id: -1, name: '全部' }" @on-node-click="onNodeClick" />
      </div>
      <div class="flex-item flex-column">
        <div>
          <FormHolder ref="searchForm" :model="searchForm">
            <FormInput v-model="searchForm.projectName" :span="8" label="项目名称" prop="projectName" />
            <FormInput v-model="searchForm.projectNo" :span="8" label="项目编码" prop="projectNo" />
            <ElCol :span="8" style="padding-left: 20px">
              <ElButton size="mini" type="primary" @click="search">开始搜索</ElButton>
              <ElButton size="mini" @click="clear">清除条件</ElButton>
            </ElCol>
          </FormHolder>
        </div>
        <PageableTable
          ref="table"
          :multiple="multiple"
          :api="getPage"
          :disabled-row-keys="disabledRowKeys"
          click-row-select
          payload-style="body"
          hide-on-single-page>
          <TableColumn label="项目名称" prop="projectName" />
          <TableColumn label="项目编号" prop="projectNo" />
          <TableColumn label="负责人" prop="masterName" />
          <TableColumn label="经费 (万元)" prop="funds" />
          <TableColumn label="起止时间" prop="beginDateTime">
            <template #default="{ row }">{{ row.beginDateTime }}-{{ row.endDateTime }}</template>
          </TableColumn>
          <TableColumn label="项目类型" prop="projectType" dict-type="project_type" />
          <TableColumn label="项目管理专业机构" prop="manageOrg" />
          <TableColumn label="所属部门" prop="departmentName" />
        </PageableTable>
      </div>
    </FlexRow>
    <template #footer>
      <ElButton size="mini" type="primary" @click="confirm">确定</ElButton>
      <ElButton size="mini" @click="close">取消</ElButton>
    </template>
  </ElementDialog>
</template>

<script>
  import { getPage, getYears } from './api'

  export default {
    name: 'ProjectsDialog',
    props: {
      visible: Boolean,
      multiple: Boolean,
      title: String,
      disabledRowKeys: Array
    },
    data() {
      return {
        searchForm: {
          projectName: '',
          year: '',
          projectNo: ''
        }
      }
    },
    methods: {
      async getYears(parentId) {
        if (parentId === -1) {
          const res = await getYears()
          const data = res.data.data.map(value => ({
            id: value,
            name: value
          }))
          res.data.data = data
          return res
        } else {
          return { data: { data: [] } }
        }
      },
      getPage(data) {
        return getPage({ ...data, example: this.searchForm })
      },
      clear() {
        this.$refs.searchForm.resetFields()
        this.search()
      },
      search() {
        this.$refs.table.reload()
      },
      onNodeClick(data) {
        this.searchForm.year = data.id === -1 ? '' : data.id
        this.search()
      },
      close() {
        this.$refs.dialog.hide()
      },
      confirm() {
        if (this.multiple) {
          this.$emit('confirm', this.$refs.table.selectionRow)
        } else {
          this.$emit('confirm', this.$refs.table.currentRow)
        }
        this.close()
      }
    }
  }
</script>
